{% extends 'base/base.html' %}
{% load static %}

{% block title %}我的兑换记录 - 妙趣积分商城{% endblock %}

{% block extra_css %}
<style>
    .points-header {
        background-color: #f0f7ff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .points-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #ff6b6b;
    }
    
    .points-label {
        color: #6c757d;
        font-size: 1rem;
    }
    
    .exchange-card {
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        margin-bottom: 15px;
        border: 1px solid #f0f0f0;
    }
    
    .exchange-card:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .reward-thumb {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 5px;
    }
    
    .status-badge {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    
    .exchange-time {
        color: #6c757d;
        font-size: 0.85rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'points:index' %}">积分商城</a></li>
                    <li class="breadcrumb-item active">我的兑换</li>
                </ol>
            </nav>
            
            <div class="points-header d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-3">我的兑换记录</h1>
                    <p class="text-muted mb-0">查看您所有的积分兑换记录</p>
                </div>
                <div class="text-center">
                    <div class="points-value">{{ user_points }}</div>
                    <div class="points-label">我的积分</div>
                    <a href="{% url 'points:index' %}" class="btn btn-sm btn-primary mt-2">继续兑换</a>
                </div>
            </div>
            
            <!-- 兑换记录列表 -->
            <div class="mt-4">
                {% for exchange in exchanges %}
                <div class="card exchange-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <img src="{{ exchange.image_url|default:'/static/images/reward-default.jpg' }}" class="reward-thumb me-3" alt="{{ exchange.name }}">
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start">
                                    <h5 class="mb-1">{{ exchange.name }}</h5>
                                    {% if exchange.status == 1 %}
                                    <span class="badge bg-warning status-badge">待处理</span>
                                    {% elif exchange.status == 2 %}
                                    <span class="badge bg-success status-badge">已完成</span>
                                    {% elif exchange.status == 3 %}
                                    <span class="badge bg-secondary status-badge">已取消</span>
                                    {% endif %}
                                </div>
                                <p class="mb-1">消耗积分: <span class="text-danger">{{ exchange.points_used }}</span></p>
                                <p class="mb-0 exchange-time">
                                    <i class="far fa-clock me-1"></i> 兑换时间: {{ exchange.exchange_time|date:"Y-m-d H:i" }}
                                </p>
                            </div>
                        </div>
                        
                        {% if exchange.reward_type == 2 and exchange.receive_info %}
                        <div class="mt-3 pt-3 border-top">
                            <h6>收货信息:</h6>
                            <div class="small text-muted">
                                收件人: {{ exchange.receive_info.name }}<br>
                                联系电话: {{ exchange.receive_info.phone }}<br>
                                收货地址: {{ exchange.receive_info.address }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-5">
                    <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                    <p class="text-muted">您还没有兑换记录</p>
                    <a href="{% url 'points:index' %}" class="btn btn-primary mt-2">立即兑换</a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %} 